<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>黑大帅表情模拟</title>
  <style>
   
    #d1 {
      width: 145px;
      height: 174px;
      border-radius: 100%;
      background-color: #28133b;
      margin: 58px auto;
      position: relative;
	  filter: drop-shadow(0 0 10px #28133b);
    }

  #d2 {
      border: 14px solid #000;
	  background-color: #000;
	  width: 15px;
	  height: 14px;
	  top: -37px;
	  left: 50px;
	  position: relative;
	    }
		#d3{
			border: 2px solid #000;
			background-color: #000;
			width: 56px;
			height: 0px;
			top: 25px;
			left: -22px;
			position: relative;
		}
		#d4{
			border-bottom: 3px solid #b3b3b3;
			backgro und-color: #b3b3b3;
			width: 15px;
			height: 69px;
			border-radius: 0px 0px 59px 0px;
			top: -68px;
			left: 80px;
			position: relative;
			transform: rotate(-16deg);
		}
		#d5{
			border-bottom: 3px solid #b3b3b3;
			backgro und-color: #b3b3b3;
			width: 16px;
			height: 71px;
			border-radius: 0px 0px 0px 18px;
			top: -12px;
			left: -30px;
			position: relative;
			transform: rotate(24deg);
		}
#d6{
	width: 15px;
	height: 4px;
	border-radius: 40%;
	background-color: #f3f3f3;
	margin: -62px 44px;
	position: relative;
}
#d7{
	width: 15px;
		height: 4px;
		border-radius: 40%;
		background-color: #f3f3f3;
		left: 89px;
		top: 58px;
		position: relative;
	}
#d8{
			    width: 80px;
			    height: 30px;
			    background-color: #646464;
			    border-radius: 100px;
			    position: relative;
				border-radius: 0px 0px 200px 200px;
			    left: -8px;
			    transform: translateX(50%);
			    top: 80px;
}
#d9{
	width: 18px;
		height: 8px;
		border-radius: 0%;
		background-color: #f3f3f3;
		left: 63px;
		top: 50px;
		position: relative;
}
#d10{
	width: 1.1px;
		height: 8px;
		border-radius: 0%;
		background-color: #646464;
		left: 71px;
		top: 42px;
		position: relative;
}
#d11{
	border-bottom: 3px solid #000000;
	border-left: 3px solid #000000;
	backgro und-color: #000000;
	width: 11px;
	height: 37px;
	border-radius: 0px 0px 0px 100px;
	top: 30px;
	left: 148px;
	position: relative;
	transform: rotate(169deg);
}
#d12{
	width: 10px;
	height: 15px;
	border-radius: 100%;
	background-color: #28133b;
	margin: 19px 158px;
	position: relative;
}
#d13{
	border: 2px solid #000;
			background-color: #000;
			width: 10px;
			height: 0px;
			top: 37px;
			left: 88px;
			position: relative;
			transform: rotate(90deg);
}
#d14{
	border: 2px solid #000;
			background-color: #000;
			width: 10px;
			height: 0px;
			top: 33px;
			left: 49px;
			position: relative;
			transform: rotate(90deg);
}
#d15{
	width: 15px;
	height: 4px;
	border-radius: 40%;
	background-color: #f3f3f3;
	margin: 37px 44px;
	position: relative;
	border:  black solid 1px;
}
#d16{
	width: 15px;
	height: 4px;
	border-radius: 40%;
	background-color: #f3f3f3;
	margin: -42px 90px;
	position: relative;
	border:  black solid 1px;
}
#d17{
	border-bottom: 3px solid #000000;
	border-left: 3px solid #000000;
	backgro und-color: #000000;
	width: 40px;
	height: 12px;
	border-radius: 0px 0px 0px 100px;
	top: -56px;
	left: -31px;
	position: relative;
	transform: rotate(100deg);
}
#d18{
	width: 10px;
	height: 15px;
	border-radius: 100%;
	background-color: #28133b;
	margin: -58px -23px;
	position: relative;
}
  </style>
</head>

<body>
  <div id="d1">
    <div id="d2">
      <div id="d3">
		  
	  </div>
    </div>
    <div id="d4">
      <div id="d5"></div>
    </div>
    <div id="d6"></div>
	<div id="d7"></div>
	<div id="d8"></div>
	<div id="d9"></div>
	<div id="d10"></div>
	<div id="d11"></div>
	<div id="d12"></div>
	<div id="d13"></div>
	<div id="d14"></div>
	<div id="d15"></div>
	<div id="d16"></div>
	<div id="d17"></div>
	<div id="d18"></div>
  </div>
</body>

</html>